<template>
 <div style="width: 100%; height: 100%">
  <div class="page">
    <!-- 盒子1 -->
    <div class="leftbox">
      <div class="small1"></div>
      <p class="word1">双线质量管控体</p>
      <p class="word2">力求每件产品、每个细节都尽善尽美</p>
      <p class="word3">够专业 才放心</p>
      <!-- 盒子二 -->
      <div class="small2"></div>
    </div>
    <!-- 登录盒子 -->
    <div class="small3">
      <p class="welcomuse">欢迎使用</p>
      <div class="registerword">系统登陆</div>

      <el-form
        :model="ruleForm"
        :hide-required-asterisk="true"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <!-- 用户名 -->
        <div class="usertotal">
          <el-form-item label="用户名" prop="userName" class="username">
            <el-input v-model="ruleForm.userName">
              <img
                slot="prefix"
                class="usernameimg"
                src="../assets/username.png"
              />
            </el-input>
          </el-form-item>
        </div>
        <div class="usertotal">
          <el-form-item label="密码" prop="passWord" class="username">
            <el-input v-model="ruleForm.passWord" type="passWord">
              <img
                slot="prefix"
                class="passwordimg"
                src="../assets/password.png"
              />
            </el-input>
          </el-form-item>
        </div>
      </el-form>
      <div class="button" @click="submitForm">登录</div>
    </div>
    <div class="copyright">
      <p>All Rights Reserved ©2021 版权所有 ｜ 粤ICP备18069755号</p>
    </div>
    <p class="whiteword">ORDER聚造</p>
    <p class="blueword">ORDER聚造</p>
  </div>
 </div>
</template>

<script>
import md5 from 'js-md5'
//import HelloWorld from './components/HelloWorld.vue'

export default {
  name: "App",
  components: {
    //HelloWorld
  },
  data() {
    return {
      ruleForm: {
       userName: "",
        passWord: ""
      },
      rules: {
      userName: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 1, max: 5, message: "长度在 1 到 5 个字符", trigger: "blur" },
        ],

        passWord: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 6, max: 16, message: "长度在 6 到 16个字符", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    submitForm() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
           this.$http({
             url:'/login',//接口地址
             method:'POST',//请求方式
             data:{//专门指的post方法和put方法放在body部分就放在data里面
                userName:this.ruleForm.userName,
                passWord:md5(this.ruleForm.passWord),
                platform:'Web'
             }
           }).then(res =>{
             if (!res.errorMsg){//Storage只能存储字符串所以要通过JSON进行转换
               localStorage.setItem('token',res.token)
               localStorage.setItem('user',JSON.stringify(res))
               this.$router.push('/index')
             }
           })
        }
      });
    },
  },
  created() {},
  mounted() {},
};
</script>

<style>
/* <style scoped>代表只在局部生效的样式 */
/* html,body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: Microsoft YaHei UI, Microsoft YaHei UI-Bold;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
} */
/* .app1{
  background:url('/image/test.png');
  height: 300px;
} */

.page {
  width: 1350px;
  height: 750px;
  background-image: url("../assets/bg1.png");
  background-size: 100% 100%;
}
.leftbox {
  width: 500px;
  height: 600px;
  position: absolute;
  /* background-color: red; */
  margin-top: 250px;
  margin-left: 100px;
}
/* 第一个盒子 */
.small1 {
  width: 118px;
  height: 162px;
  background: #e1f2f9;
  border-radius: 0px 0px 0px 0px;
  opacity: 0.3;
  position: absolute;
  margin-top: 202px;
  margin-left: 85px;
}

.small2 {
  width: 118px;
  height: 162px;
  background: #e1f2f9;
  border-radius: 0px 0px 0px 0px;
  opacity: 0.3;
  position: absolute;
  margin-top: 364px;
  margin-left: 157px;
}

.small3 {
  width: 359px;
  height: 359px;
  background: #efeff0;
  border-radius: 20px 20px 20px 20px;
  opacity: 0.9;
  position: absolute;
  position: fixed;
  top: 50%;
  right: 20%;
}

/* 第一个盒子的文字1 */
.word1 {
  width: 28px;
  height: 150px;
  font-size: 20px;
  font-family: MicrosoftYaHeiUI-Bold-, MicrosoftYaHeiUI-Bold;
  font-weight: normal;
  color: #fefefe;
  line-height: 0px;
  position: absolute;
  margin-top: 200px;
  margin-left: 121px;
  writing-mode: tb-rl;
}

.word2 {
  width: 20px;
  height: 256px;
  font-size: 16px;
  font-family: MicrosoftYaHeiUI-Bold-, MicrosoftYaHeiUI-Bold;
  font-weight: normal;
  color: #ffffff;
  line-height: 0px;
  position: absolute;
  margin-top: 200px;
  margin-left: 165px;
  writing-mode: tb-rl;
}

.word3 {
  width: 35px;
  height: 194px;
  font-size: 28px;
  font-family: MicrosoftYaHeiUI-Bold-, MicrosoftYaHeiUI-Bold;
  font-weight: normal;
  color: #6bb9da;
  line-height: 0px;
  position: absolute;
  margin-top: 280px;
  margin-left: 200px;
  writing-mode: tb-rl;
}
.welcomuse {
  width: 52px;
  height: 16px;
  font-size: 13px;
  font-family: MicrosoftYaHeiUI-, MicrosoftYaHeiUI;
  font-weight: normal;
  color: #96a3b0;
  line-height: 0px;
  position: relative;
  margin-top: 32px;
  margin-left: 23px;
}

.registerword {
  width: 333px;
  height: 65px;
  font-size: 27px;
  font-family: MicrosoftYaHeiUI-Bold-, MicrosoftYaHeiUI-Bold;
  font-weight: normal;
  color: #4e4e4e;
  line-height: 0px;
  /* background-color: red; */
  position: relative;
  top: 30px;
  left: 10px;
}
.usertotal {
  width: 359px;
  height: 80px;
  /* background-color: blue; */
  margin-top: 10px;
}
.username {
  font-size: 15px;
  font-family: "Microsoft YaHei UI";
  color: rgb(115, 116, 116);
  line-height: 1.2;
  position: relative;
  left: -30px;
  top: 15px;
  z-index: 15;
}

.usernameinput {
  width: 256px;
  height: 37px;
  background: #dcdcdc;
  border-radius: 5px 5px 5px 5px;
  opacity: 1;
  border: 1px solid #d4e5f6;
  position: relative;
  top: 30px;
  left: 100px;
}
.usernameimg {
  background-image: url("../assets/username.png");
  width: 12px;
  height: 14px;
  position: relative;
  float: left;
  top: 15px;
  /* left: 10px; */
}
.passwordimg {
  background-image: url("../assets/password.png");
  width: 12px;
  height: 14px;
  position: relative;
  float: left;
  top: 15px;
  /* left: 10px; */
}
.button {
  background-color: #409eff;
  border-radius: 15px 15px 15px 15px;
  width: 290px;
  height: 39px;
  left: 40px;
  position: relative;
  text-align: center;
  font-size: 20px;
  top: 10px;
}
.copyright {
  /* background-color: red; */
  width: 406px;
  height: 16px;
  font-size: 13px;
  font-family: MicrosoftYaHeiUI-Bold-, MicrosoftYaHeiUI-Bold;
  font-weight: normal;
  color: #565656;
  line-height: 0px;
  position: absolute;
  margin-top: 730px;
  margin-left: 500px;
}
.whiteword {
  width: 200px;
  height: 46px;
  color: #d7e8fa;
  font-size: 32px;
  opacity: 0.3;
  top: 677px;
  left: 1119px;
  position: absolute;
}
.blueword {
  width: 112px;
  height: 25px;
  color: #409eff;
  font-size: 20px;
  top: 710px;
  left: 1124px;
  position: absolute;
}

@media screen and (max-width: 1440px) {
  .small3 {
    transform: translate(50px, -55%) scale(0.8);
  }
  .leftbox {
    transform: translate(-100px, -50%) scale(0.8);
  }
  .copyright {
    transform: translate(0, 10px) scale(0.8);
  }
}
</style>
